<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TTS V1.0</title>
    <link rel="stylesheet" href="style.css">
    <script type="module" src="./loadSpeakers.js"></script>
    <script type="module" src="./synth.js"></script>
    <script type="module" src="./config.js"></script>
  </head>
  <body>
    <div id="app">
      <fieldset>
        <legend>选择音色</legend>
        <span>
          <label for="type">分类</label>
          <select name="type" id="type"></select>
        </span>
        <span>
          <label for="cj">场景</label>
          <select name="cj" id="cj"></select>
        </span>
        <span>
          <label for="speaker">音色</label>
          <select name="speaker" id="speaker"></select>
        </span>
      </fieldset>
      <fieldset id="ta">
        <legend><label for="text">输入内容</label></legend>
        <textarea name="text" id="text">欢迎使用语音合成</textarea>
      </fieldset>
      <fieldset>
        <legend>合成输出</legend>
        <audio controls></audio>
      </fieldset>
      <div>
        <button id="synth">合成</button>
        <button id="setting">设置</button>
      </div>
    </div>
    <dialog id="setting-dialog">
      <form method="dialog">
        <span>服务接口认证信息(请按照火山引擎后台显示的数据填写)</span>
        <table>
          <tbody>
            <tr>
              <td><label for="appid">APP ID</label></td>
              <td><label for="token">Access Token</label></td>
            </tr>
          </tbody>
          <tbody>
            <tr>
              <td>
                <input type="text" id="appid" />
              </td>
              <td>
                <input type="text" id="token" />
              </td>
            </tr>
          </tbody>
        </table>
        <div>
          <button id="reset">清除数据</button>
        </div>
        <div>
          <button value="default" id="applay">应用</button>
          <button value="cancel">关闭</button>
        </div>
      </form>
    </dialog>
  </body>
</html>
